@extends('public.father')

@section('content')

    <b class="line"></b>
    <div class="shopNav">
        <div class="slideall" style="height: auto;">

            <div class="long-title"><span class="all-goods">全部分类</span></div>
            <div class="nav-cont">
                <ul>
                    <li  class="index"><a style="color: red;cursor: default" href="#">热门搜索:</a></li>


                    @foreach($hot as $v)
                        <li class="qc"><a href="/search?search={{$v['name']}}">{{$v['name']}}</a></li>
                    @endforeach


                </ul>
            </div>
            <div class="bannerTwo">
                <!--轮播 -->
                <div class="am-slider am-slider-default scoll" data-am-flexslider id="demo-slider-0">
                    <ul class="am-slides">

                        @foreach($slider as $k=>$v)
                            <li class="banner1"><span><img src="{{$v->thumb}}"/></span></li>
                        @endforeach

                    </ul>
                </div>
                <div class="clear"></div>
            </div>

            <!--侧边导航 -->
            <div id="nav" class="navfull" style="position: static;">
                <div class="area clearfix">
                    <div class="category-content" id="guide_2">

                        <div class="category" style="box-shadow:none ;margin-top: 2px;height: 561px">
                            <ul class="category-list navTwo" id="js_climit_li">


                                @foreach($cate as $v)

                                    <li>
                                        <div class="category-info">
                                            <h3 class="category-name b-category-name"><i><img src="{{$v['thumb']}}"></i><a
                                                        class="ml-22" title="点心"
                                                        href="{{route('list',$v['id'])}}">{{$v['name']}}</a></h3>
                                            <em>&gt;</em></div>
                                        <div class="menu-item menu-in top">
                                            <div class="area-in">
                                                <div class="area-bg">
                                                    <div class="menu-srot">
                                                        <div class="sort-side">

                                                            @foreach($v['_data'] as $kk => $vv)
                                                                <dl class="dl-sort">
                                                                    <dt><a href="{{route('list',$vv['id'])}}"><span
                                                                                    title="{{$vv['name']}}">{{$vv['name']}}</span></a>
                                                                    </dt>

                                                                    @foreach($vv['_data'] as $kkk => $vvv)
                                                                        <dd><a title="{{$vvv['name']}}"
                                                                               href="{{route('list',$vvv['id'])}}"><span>{{$vvv['name']}}</span></a>
                                                                        </dd>
                                                                    @endforeach


                                                                </dl>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <b class="arrow"></b>
                                    </li>

                                @endforeach

                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <!--导航 -->
            <script type="text/javascript">
                (function () {
                    $('.am-slider').flexslider();
                });
                $(document).ready(function () {
                    $("li").hover(function () {
                        $(".category-content .category-list li.first .menu-in").css("display", "none");
                        $(".category-content .category-list li.first").removeClass("hover");
                        $(this).addClass("hover");
                        $(this).children("div.menu-in").css("display", "block")
                    }, function () {
                        $(this).removeClass("hover")
                        $(this).children("div.menu-in").css("display", "none")
                    });
                })
            </script>


            <!--小导航 -->
            <div class="am-g am-g-fixed smallnav">
                <div class="am-u-sm-3">
                    <a href="sort.html"><img src="/templates/hd/assets/images/navsmall.jpg"/>
                        <div class="title">商品分类</div>
                    </a>
                </div>
                <div class="am-u-sm-3">
                    <a href="#"><img src="/templates/hd/assets/images/huismall.jpg"/>
                        <div class="title">大聚惠</div>
                    </a>
                </div>
                <div class="am-u-sm-3">
                    <a href="#"><img src="/templates/hd/assets/images/mansmall.jpg"/>
                        <div class="title">个人中心</div>
                    </a>
                </div>
                <div class="am-u-sm-3">
                    <a href="#"><img src="/templates/hd/assets/images/moneysmall.jpg"/>
                        <div class="title">投资理财</div>
                    </a>
                </div>
            </div>


            <!--各类活动-->
            <div class="row">


                <li><a href="{{route('list',1)}}"><img src="/templates/hd/assets/images/row1.jpg"/></a></li>
                <li><a href="{{route('list',9)}}"><img src="/templates/hd/assets/images/row2.jpg"/></a></li>
                <li><a href="{{route('list',20)}}"><img src="/templates/hd/assets/images/row3.jpg"/></a></li>
                <li><a href="{{route('list',1)}}"><img src="/templates/hd/assets/images/row4.jpg"/></a></li>

            </div>
            <div class="clear"></div>
            <!--走马灯 -->

            <div class="marqueenTwo">
                <span class="marqueen-title"><i class="am-icon-volume-up am-icon-fw"></i>限时活动</span>

                <div id="gaizi" style="width: 100%;height: 269px;position: relative;overflow: hidden">

                    <div id="hehe" style="width: 100%;height: 800px;position: absolute;left: 0;top: 0;">


                        @foreach($cuxiao as $v)
                            <div class="demo">
                                <a href="{{route('detail',$v['id'])}}">

                                    <img src="{{explode(',',$v['pics'])[0]}}" height="200" alt="">

                                </a>
                                <h3 style="color: #000;margin-top: 10px">{{$v['title']}}</h3>
                                <div style="margin-top: 15px">
                                    <span style="color: red">￥{{$v['mallprice']}}</span>
                                    <del style="float:right;color: red;text-decoration:line-through;font-weight: bold">
                                        ￥{{$v['goodprice']}}</del>
                                </div>
                            </div>

                        @endforeach


                    </div>

                </div>


            </div>
            <div class="clear"></div>

            <script>
                    var c = 0;
                    var timer = setInterval(function () {
                        c++;

                        if (c == 3) {
                            c = 0
                        }
                        var t = -269 * c
                        $('#hehe').animate({'top': t + 'px'}, 3000)
                    });


            </script>


        </div>


        <script type="text/javascript">
            if ($(window).width() < 640) {
                function autoScroll(obj) {
                    $(obj).find("ul").animate({
                        marginTop: "-39px"
                    }, 500, function () {
                        $(this).css({
                            marginTop: "0px"
                        }).find("li:first").appendTo(this);
                    })
                }

                $(function () {
                    setInterval('autoScroll(".demo")', 3000);
                })
            }
        </script>
    </div>
    <div class="shopMainbg">
        <div class="shopMain" id="shopmain">


            <!--今日推荐 -->

            <div class="am-g am-g-fixed recommendation">
                <div class="clock am-u-sm-3"
                ">
                <img src="/templates/hd/assets/images/2016.png "></img>
                <p>今日<br>推荐</p>
            </div>
            @foreach($recommend as $v)
                <div class="am-u-sm-4 am-u-lg-3 ">
                    <div class="info ">
                        <h3>{{$v['title']}}</h3>
                        <h4>￥{{$v['mallprice']}}</h4>
                    </div>
                    <div class="recommendationMain one">
                        <a href="{{route('detail',$v['id'])}}"><img src="{{explode(',',$v['pics'])[0]}}"></a>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="clear "></div>
        <!--热门活动 -->


        {{--秒杀--}}
        <div class="am-container">

            <div class="sale-mt">
                <i></i>
                <em class="sale-title">限时</em>
                <div class="s-time" id="colockbox1">
                    <span class="hh">00</span>
                    <span class="mm">00</span>
                    <span class="ss">00</span>
                </div>
            </div>

            <div class="am-g am-g-fixed sale">
                @foreach($kill as $v)
                    <div class="am-u-sm-3 sale-item">
                        <div class="s-img">
                            <a href="{{route('detail',$v['id'])}}"><img src="{{$v['pics']}}"/></a>
                        </div>
                        <div class="s-info">
                            <a href="#"><p class="s-title">{{$v['title']}}</p></a>
                            <div class="s-price">￥<b>9.90</b>
                                <a href="#" class="s-buy btn trigger-alert" style="color: black;border-style: none">秒杀</a>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>


        </div>
        <div id="modal-custom" class="iziModal">
        </div>
        <div id="modal-alert" class="iziModal"></div>
        {{--秒杀结束--}}

        <script>

            $("#modal-alert").iziModal({
                title: "对不起，秒杀还未开始",
                iconClass: 'icon-check',
                headerColor: '#ff6700',
                width: 600
            });
            $(document).on('click', '.trigger-alert', function (event) {
                event.preventDefault();
                $('#modal-alert').iziModal('open');
            });

            $(function () {
                countDown("2018/9/13 1:32:59", "#colockbox1");
            });

            function countDown(time, id) {

                // var day_elem = $(id).find('.day');
                var hour_elem = $(id).find('.hh');
                var minute_elem = $(id).find('.mm');
                var second_elem = $(id).find('.ss');

//if(typeof end_time == "string")
                var end_time = new Date(time).getTime(),//月份是实际月份-1
                    sys_second = (end_time - new Date().getTime()) / 1000;
                var timer = setInterval(function () {
                    if (sys_second > 1) {
                        sys_second -= 1;
                        var day = Math.floor((sys_second / 3600) / 24);
                        var hour = Math.floor((sys_second / 3600) % 24);
                        var minute = Math.floor((sys_second / 60) % 60);
                        var second = Math.floor(sys_second % 60);
                        // day_elem && $(day_elem).text(day);//计算天
                        $(hour_elem).text(hour < 10 ? "0" + hour : hour);//计算小时
                        $(minute_elem).text(minute < 10 ? "0" + minute : minute);//计算分钟
                        $(second_elem).text(second < 10 ? "0" + second : second);//计算秒杀


                    } else {


                        $("#modal-alert").iziModal({
                            title: "秒杀成功",
                            iconClass: 'icon-check',
                            headerColor: '#ff463d',
                            width: 600
                        });

                        clearInterval(timer);
                    }
                }, 1000);
            }


        </script>


        <div class="clear "></div>

        {{--在这里循环--}}
        @foreach($cate as $k=>$v)
            @if($k<=45)
            <div id="f1">
                <!--甜点-->
                <div class="am-container ">
                    <div class="shopTitle ">
                        <h4>{{$v['name']}}</h4>
                        <div class="today-brands ">

                            @foreach($v['_data'] as $vv)
                                <a href="{{route('list',$vv['id'])}} ">{{$vv['name']}}</a>
                            @endforeach

                        </div>
                        <span class="more ">
                    <a href="# ">更多美味<i class="am-icon-angle-right" style="padding-left:10px ;"></i></a>
                        </span>
                    </div>
                </div>
                <div class="am-g am-g-fixed floodFour">

                    {{--<div style=""></div>--}}

                            <div class="am-u-sm-5 am-u-md-4 text-one list" style="position: relative;overflow: hidden">
                                <div class="fuzhu" style="width: 300%;height: 100%;position: absolute">


                                    @foreach($v['lunbo'] as $val)

                                    <div style="width: 33.333%;height: 100%;float: left" class="guanggao">
                                        <a href="">
                                            <div class="word">


                                                {{$val['desc']}}


                                            </div>
    {{--                                        <img src="{{$val['tupian']}}"/>--}}
                                            <img  src="{{$val['tupian']}}" alt="">
                                        </a>
·                                    </div>
                                   @endforeach




                                </div>
                            </div>


















                    @foreach($v['shop'] as $kkk=>$vvv)
                        <div class="am-u-sm-7 am-u-md-5 am-u-lg-2 text-two">
                            <div class="outer-con ">
                                <div class="title ">
                                    {{$vvv['title']}}
                                </div>
                                <div class="sub-title ">
                                    ¥{{$vvv['goodprice']}}
                                </div>
                            </div>
                            {{--<a href="{{route('detail',$vvv['id'])}}"><img src="{{explode(',',$vvv['pics'])[0]}}"/></a>--}}
                            <a href="{{route('detail',$vvv['id'])}}"><img src="{{explode(',',$vvv['pics'])[0]}}"/></a>
                        </div>
                    @endforeach

                </div>
                <div class="clear "></div>
            </div>
            @endif
        @endforeach
        <hr style="margin-top: 15px;color: black">



    </div>
    </div>



    <script>
        $(function () {
            var c = 0;
            setInterval(function () {
                c++;
                if (c == 3) {
                    c = 0
                }
                var l = -240 * c
                $('.fuzhu').animate({'left': l + 'px'}, 500)
            },2000)
        })


    </script>



    <!--引导 -->
    <div class="navCir">
        <li class="active"><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
        <li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
        <li><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
        <li><a href="/templates/hd/assets/person/index.html"><i class="am-icon-user"></i>我的</a></li>
    </div>




@endsection

